<template>
  <div class="count">
    <!-- 左侧数量统计 -->
    <PagePanel :panelTitle="activePanel.panelTitle" @clickClose="clickClose">
      <LittleTitle>分类统计</LittleTitle>
      <div class="category-count">
        <div class="category-count-item">
          <div class="left-item">大类</div>
          <div class="right-item">9个</div>
        </div>
        <div class="category-count-item">
          <div class="left-item">中类</div>
          <div class="right-item">42个</div>
        </div>
        <div class="category-count-item">
          <div class="left-item">小类</div>
          <div class="right-item">100个</div>
        </div>
      </div>
      <LittleTitle>小类统计列表</LittleTitle>
      <div class="table">
        <el-table :data="tableData" border style="width: 100%;" class="mytable">
          <el-table-column type="index" align="center" width="50">
          </el-table-column>
          <el-table-column align="center" prop="TypeName" label="分类名称">
          </el-table-column>
          <el-table-column align="center" prop="count" label="数量">
          </el-table-column>
        </el-table>
      </div>
    </PagePanel>
  </div>
</template>

<script>
import * as echarts from "echarts";
import PagePanel from "@/components/PagePanel";
import LittleTitle from "@/components/LittleTitle";
import { statistic_l1, statistic_l2, statistic_l3 } from "@/api/stat.js";

export default {
  name: "CountAnalyse",
  components: { PagePanel, LittleTitle },
  data() {
    return {
      tableData: [],
    };
  },
  computed: {
    activePanel() {
      return this.$store.state.activePanel;
    },
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      const res = await statistic_l3();
      if (!res) return;
      const data = JSON.parse(res.data);
      this.tableData = data;
    },
    clickClose() {
      console.log("@@@@@@@@@@@@", this.activePanel);
    },
  },
  beforeDestroy() {
    //因为面板都是用的v-if，会销毁面板，需要销毁的事件也可以写这里
  },
};
</script>
<style lang="less" scoped>
.count {
  height: 100%;
  ::v-deep .page-panel {
    width: 400px;
    height: 100%;
    .content {
      height: calc(100% - 46px);
      // overflow-y: auto;
      // overflow-x: hidden;
    }
  }
}
.category-count {
  display: flex;
  justify-content: space-between;
  // background-color: #e9e9eb;
  // background-color: '#409eff20'; //'#00176320',
  padding: 10px;
  .category-count-item {
    padding: 10px 12px;
    display: flex;
    height: 40px;
    .left-item {
      text-align: left;
    }
    .right-item {
      line-height: 60px;
      margin-left: 15px;
      font-size: 12px;
    }
    &:nth-of-type(1) {
      background-color: #67c23a;
    }
    &:nth-of-type(2) {
      background-color: #e6a23c;
    }
    &:nth-of-type(3) {
      background-color: #909399;
    }
  }
}
.table {
  overflow-y: auto;
  height: calc(100% - 180px);
  ::v-deep .el-table .el-table__cell {
    padding: 5px;
  }

  .mytable {
    background-color: transparent !important;
  }
  .mytable ::v-deep .el-table th.el-table__cell,
    ::v-deep .el-table th,
    ::v-deep .el-table tr {
      color: white;
      background-color: transparent !important;
  }
}
#total {
  width: 820px;
  height: 500px;
}
#pie {
  width: 820px;
  height: 300px;
}
#pie1 {
  width: 820px;
  height: 520px;
}
#pie2 {
  width: 820px;
  height: 800px;
}
</style>
